<template>
	<view class="container">
    <view class="background"></view>
    <view class="background-cover"></view>
		<tui-navigation-bar :isFixed="true" :isOpacity="false" splitLine :zIndex="99999" :scrollTop="0" title="" backgroundColor="#fff" color="#333">
			<view style="height: 40px;display: flex;align-items: center;">
				<view style="width: 15rpx;" @click="handleBack"></view>
				<image v-if="share" @click="handleToIndex" src="https://static.wddzq.com/static/shouye-xuanzhong.png" style="width: 30rpx;height: 30rpx;padding: 15rpx;background-color: #f2f2f2;border: 2rpx solid #ddd;border-radius: 50%;" />
				<u-icon v-else name="arrow-left" size="45" color="#333" @click="handleBack"></u-icon>
				<view style="width: 10rpx"></view>
				<image mode="aspectFill" class="active-boss-img" style="width: 58rpx;height: 58rpx;" @click="toUserPersonal(detail.createUser.userId)" :src="detail?.createUser?.headPic"></image>
				<view style="width: 10rpx"></view>
				<text style="font-size: 28rpx;color: #333;" @click="toUserPersonal(detail.createUser.userId)">{{detail?.createUser?.nickname}}</text>
			</view>
		</tui-navigation-bar>

    <view class="header">
      <view class="header-info-wrapper">
        <view class="header-info-left-wrapper">
          <image src="/static/chat/car-icon.png"/>
          <text>26人已上车</text>
        </view>

        <view class="header-info-right-wrapper">
          <text>查看活动</text>
        </view>
      </view>

      <view class="user-wrapper">
        <view class="user-scroll-wrapper">
          <view class="user-container">
            <view class="avatar-wrapper">
              <image class="avatar"/>
              <image class="icon" src="/static/chat/club-icon.png"/>
            </view>
            <text class="user-name">张某某</text>
          </view>
          <view class="user-container">
            <view class="avatar-wrapper">
              <image class="avatar"/>
              <image class="icon" src="/static/chat/club-icon.png"/>
            </view>
            <text class="user-name">张某某</text>
          </view>
          <view class="user-container">
            <view class="avatar-wrapper">
              <image class="avatar"/>
              <image class="icon" src="/static/chat/club-icon.png"/>
            </view>
            <text class="user-name">张某某</text>
          </view>
          <view class="user-container">
            <view class="avatar-wrapper">
              <image class="avatar"/>
              <image class="icon" src="/static/chat/club-icon.png"/>
            </view>
            <text class="user-name">张某某</text>
          </view>
          <view class="user-container">
            <view class="avatar-wrapper">
              <image class="avatar"/>
              <image class="icon" src="/static/chat/club-icon.png"/>
            </view>
            <text class="user-name">张某某</text>
          </view>
          <view class="user-container">
            <view class="avatar-wrapper">
              <image class="avatar"/>
              <image class="icon" src="/static/chat/club-icon.png"/>
            </view>
            <text class="user-name">张某某</text>
          </view>
          <view class="user-container">
            <view class="avatar-wrapper">
              <image class="avatar"/>
              <image class="icon" src="/static/chat/club-icon.png"/>
            </view>
            <text class="user-name">张某某</text>
          </view>
        </view>
      </view>
    </view>

    <view class="content-wrapper">

      <view class="content-left-item-wrapper">
        <image class="content-avatar" />
        <view class="content-container">
          <view class="content-info-wrapper">
            <text>广东福田煲仔饭</text>
            <image src="/static/chat/club-icon.png"/>
          </view>
          <view class="content-main-content-wrapper">
            <view class="content-top-info-wrapper">
              <image src="/static/chat/location-icon.png"/>
              <text>系统消息：</text>
            </view>

            <text class="content">士大夫方法方法烦烦烦烦烦烦烦烦烦烦烦烦是的烦烦烦烦烦烦烦烦烦烦烦烦是顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶是顶顶顶顶顶顶顶顶顶顶顶顶顶是顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶是顶顶顶顶顶顶顶顶顶顶</text>
          </view>
        </view>
      </view>

      <view class="content-right-item-wrapper">
        <view class="content-container content-right-container">
          <view class="content-info-wrapper content-info-right-wrapper">
            <text>广东福田煲仔饭</text>
            <image src="/static/chat/club-icon.png"/>
          </view>
          <view class="content-main-content-wrapper content-right-main-content-wrapper">
            <view class="content-top-info-wrapper">
              <image src="/static/chat/location-icon.png"/>
              <text>系统消息：</text>
            </view>

            <text class="content">士大夫方法方法烦烦烦烦烦烦烦烦烦烦烦烦是的烦烦烦烦烦烦烦烦烦烦烦烦是顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶是顶顶顶顶顶顶顶顶顶顶顶顶顶是顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶是顶顶顶顶顶顶顶顶顶顶</text>
          </view>
        </view>
        <image class="content-avatar content-right-avatar" />
      </view>

      <view class="content-right-item-wrapper">
        <view class="content-container content-right-container">
          <view class="content-info-wrapper content-info-right-wrapper">
            <text>广东福田煲仔饭</text>
            <image src="/static/chat/club-icon.png"/>
          </view>
          <view class="content-main-content-wrapper content-right-main-content-wrapper">
            <view class="content-top-info-wrapper">
              <image src="/static/chat/location-icon.png"/>
              <text>系统消息：</text>
            </view>

            <text class="content">士大夫方法方法烦烦烦烦烦烦烦烦烦烦烦烦是的烦烦烦烦烦烦烦烦烦烦烦烦是顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶是顶顶顶顶顶顶顶顶顶顶顶顶顶是顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶是顶顶顶顶顶顶顶顶顶顶</text>
          </view>
        </view>
        <image class="content-avatar content-right-avatar" />
      </view>

    </view>

		<view class="footer">
      <view class="action-wrapper">
        <text>确认通知</text>
        <text>呼叫客服</text>
      </view>
      <view class="action-input-wrapper">
        <image class="action-avatar" src=""/>
        <input />
        <view class="send-btn">发送</view>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail: {},
			}
		},
		onLoad(params) {
		},
		onShow() {
		},
		onReady() {

		},
		onShareAppMessage() {
			return {
				title: this.detail?.title + '-' + this.detail?.describeContent,
			  path: `/pages/detail/detail?activityId=${this.detail?.id}`,
			  imageUrl: this.detail?.picFirst,
			};
		},
		methods: {

		}
	}
</script>

<style>
  .container{
    position: relative;
  }

  .background{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    background-image: url("https://img1.baidu.com/it/u=2552898962,4149546494&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500");
    background-position: center;
  }

  .background-cover{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
    backdrop-filter: blur(12rpx);
  }

  .header{
    position: fixed;
    z-index: 99;
    left: 0;
    right: 0;
    top: 200rpx;
    padding-top: 24rpx;
    padding-left: 24rpx;
    padding-right: 24rpx;
    display: flex;
    flex-direction: column;
  }
  .header-info-wrapper{
    display: flex;
    justify-content: space-between;
    margin-bottom: 24rpx;
  }
  .header-info-left-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .header-info-left-wrapper image{
    width: 32rpx;
    height: 32rpx;
    margin-right: 12rpx;
  }
  .header-info-left-wrapper text{
    font-size: 26rpx;
    font-weight: 400;
    color: #FFFFFF;
  }

  .header-info-right-wrapper{
    display: flex;
  }
  .header-info-right-wrapper text{
    font-size: 26rpx;
    font-weight: 400;
    color: #FFFFFF;
  }

  .user-wrapper{
    width: 750rpx;
  }
  .user-container{
    display: inline-block;
    margin-right: 20rpx;
    position: relative;
  }
  .avatar-wrapper{
    position: relative;
    margin-bottom: 8rpx;
  }
  .avatar-wrapper .avatar{
    width: 84rpx;
    height: 84rpx;
    border: 2prx solid #FF6565;
    background: green;
    border-radius: 50%;
  }
  .avatar-wrapper .icon{
    width: 74rpx;
    height: 28rpx;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
  }
  .user-name{
    display: block;
    text-align: center;
    font-size: 22rpx;
    font-weight: 400;
    color: #FFFFFF;
  }

  .content-wrapper{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding-top: 500rpx;
    padding-bottom: 300rpx;
    overflow-y: scroll;
  }

  .content-left-item-wrapper{
    display: flex;
    margin-bottom: 32rpx;
  }
  .content-avatar{
    width: 65rpx;
    height: 66rpx;
    border-radius: 50%;
    background: red;
    margin-right: 16rpx;
  }
  .content-container{
    display: flex;
    flex-direction: column;
  }
  .content-info-wrapper{
    display: flex;
    align-items: center;
    margin-bottom: 8rpx;
  }
  .content-info-wrapper text{
    font-size: 24rpx;
    font-weight: bold;
    color: #FFFFFF;
    margin-right: 8rpx;
  }
  .content-info-wrapper image {
    width: 57rpx;
    height: 24rpx;
  }
  .content-main-content-wrapper{
    background: rgba(0, 0, 0, .4);
    border-radius: 16rpx;
    padding: 24rpx;
    display: flex;
    flex-direction: column;
    max-width: 600rpx;
  }
  .content-top-info-wrapper{
    display: flex;
    margin-bottom: 20rpx;
  }
  .content-top-info-wrapper image{
    width: 30rpx;
    height: 30rpx;
    margin-right: 8rpx;
  }
  .content-top-info-wrapper text{
    font-size: 28rpx;
    font-weight: 400;
    color: #00E6EA;
  }
  .content{
    font-size: 28rpx;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 40rpx;
  }

  .content-right-item-wrapper{
    display: flex;
    justify-content: flex-end;
    margin-right: 24rpx;
    margin-bottom: 32rpx;
  }
  .content-container.content-right-container{
    align-items: flex-end;
  }
  .content-right-avatar{
    margin-right: 0;
    margin-left: 14rpx;
  }
  .content-info-right-wrapper{
    justify-content: right;
    align-items: center;
  }
  .content-main-content-wrapper.content-right-main-content-wrapper {
    max-width: 500rpx;
    background: #1677FF;
  }

  .footer{
    position: fixed;
    z-index: 99;
    left: 0;
    right: 0;
    bottom: 0;
    background: #222;
    padding-top: 24rpx;
    padding-left: 32rpx;
    padding-right: 32rpx;
    padding-bottom: 68rpx;
    display: flex;
    flex-direction: column;
  }
  .action-wrapper{
    display: flex;
    margin-bottom: 24rpx;
  }
  .action-wrapper text{
    height: 54rpx;
    line-height: 54rpx;
    padding: 0 24rpx;
    background: rgba(255,255,255,0.08);
    border-radius: 30rpx;
    border: 1px solid rgba(251,252,255,0.1);
    font-size: 26rpx;
    font-weight: 400;
    color: #FFFFFF;
    margin-right: 24rpx;
  }
  .action-input-wrapper{
    display: flex;
    justify-content: space-between;
  }
  .action-avatar{
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    background: red;
  }
  .action-input-wrapper input{
    width: 438rpx;
    height: 62rpx;
    background: #FFFFFF;
    border-radius: 31rpx;
    opacity: 0.2;
  }
  .send-btn{
    padding: 0 40rpx;
    height: 60rpx;
    line-height: 60rpx;
    background: #1677FF;
    border-radius: 31rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #FFFFFF;
  }
</style>
